import React, { useEffect, useState } from 'react'
import { Avatar, Badge, Form, Input, Modal, Select, Space } from 'antd'
import { useRequest } from 'ahooks'
import { useRouter } from 'next/navigation'
import useSwr from 'swr'
import { CheckCircleFilled } from '@ant-design/icons'
import styles from './baseStyle.module.scss'
import { createApp, updateAppInfo } from '@/service/apps'
import { useAppContext } from '@/context/app-context'
import { getTenants } from '@/service/common'
import './createModal.scss'
import { getRedirection } from '@/utils/app-redirection'
import { getQueryParams } from '@/utils/getUrlParams'
const { TextArea } = Input

export type OpenTypes = {
  id?: string
  isOpen: boolean
  title?: string
  data?: any
  mode?: string
  titleName?: string
}

type Props = {
  categoryTenants?: boolean //是否只展示默认空间
  disabled?: boolean,
  appId?: string
  isAddOpen: OpenTypes
  onClose: (val: boolean) => void
  mutate?: () => void
  tenant_id?: any
  status?: string
  defaultAvatarNumber?: string
}

const CreateModal: React.FC<Props> = (props) => {
  const { isAddOpen, onClose, mutate, tenant_id, appId, disabled = false, categoryTenants = false, defaultAvatarNumber = '1' } = props
  const consoleTokenFromLocalStorage = localStorage?.getItem('console_token')
  const [form] = Form.useForm()
  const [name, setName] = useState('Agent')
  const [choise, setChoise] = useState('agent-chat')
  const [selectItem, setSelectItem] = useState([])
  const [isModalOpen, setIsModalOpen] = useState(isAddOpen.isOpen)
  const [tenantId, setTenantId] = useState(tenant_id)
  const [avatarNumber, setAvatarNumber] = useState(defaultAvatarNumber)
  const [avatarName, setAvatarName] = useState('agent')
  const { isCurrentWorkspaceEditor } = useAppContext()
  const { push } = useRouter()
  const { data: tenants, mutate: tenantsMutate }: any = useSwr('/getTenants', getTenants)

  const handleSelect = (value: string, name: string, avatarName: string) => {
    setChoise(value)
    setName(name)
    setAvatarName(avatarName)
  }
  const onSelectChange = (e: any) => {
    setTenantId(e)
  }
  const { run: addRun } = useRequest(
    async (param) => {
      const result = await createApp(param)
      getRedirection(isCurrentWorkspaceEditor, {
        tenant_id: tenantId,
        ...result,
        app_id: result.id,
        status: result.status,
        name1: result.name,
        desc: result.description
      }, push)

      return result
    },
  )
  const { run: editRun } = useRequest(
    async (param) => {
      const result = await updateAppInfo(param)
      return result
    },
  )

  const handleOk = () => {
    form.validateFields().then((values) => {
      if (isAddOpen?.id) {
        editRun({
          ...values,
          appId,
          appID: isAddOpen?.id,
          mode: isAddOpen?.mode || choise,
          tenant_id: tenantId,
          header_image: `${isAddOpen?.mode === 'agent-chat' ? 'header_agent' : 'header_' + isAddOpen?.mode}${avatarNumber}` || `header_${avatarName + avatarNumber}`,
        })
        mutate?.()
      }
      else {
        if (isAddOpen?.mode === 'chat') {
          history.pushState(null, '', `/agent-platform-web/tools/createByUrl?provider=${values.name}&desc=${values.description}&tenant_id=${tenantId}&console_token=${consoleTokenFromLocalStorage}`)
        }
        else {
          addRun({
            ...values,
            appId,
            mode: isAddOpen?.mode || choise,
            tenant_id: tenantId,
            header_image: `header_${avatarName + avatarNumber}`,
          })
        }
      }

      // window.location.reload()
      setIsModalOpen(false)
      onClose(false)
      form.resetFields()
    })
  }

  const handleCancel = () => {
    setIsModalOpen(false)
    onClose(false)
    form.resetFields()
  }

  const AvatarClick = (id: string) => {
    setAvatarNumber(id)
  }

  useEffect(() => {
    if (isAddOpen.isOpen) {
      setIsModalOpen(true)
      if (isAddOpen.id) {
        form.setFieldsValue({
          ...isAddOpen?.data,
        })
      }
      if (isAddOpen.mode)
        setAvatarName(isAddOpen?.mode === 'agent-chat' ? 'agent' : isAddOpen?.mode)
    }
    if (tenantId) {
      form.setFieldsValue({
        workSpace: tenantId,
      })
    }
  }, [form, tenantId, isAddOpen?.data, isAddOpen.id, isAddOpen.isOpen, isAddOpen?.mode])

  useEffect(() => {
    if (!isAddOpen.isOpen)
      mutate?.()
  }, [isAddOpen.isOpen, mutate])

  useEffect(() => {
    const newarr: any = []
    if (tenants) {
      tenants.forEach((item: any) => {
        // if (categoryTenants) {
        //   if (item.name === '默认空间') {
        //   newarr.push({ label: item.name, value: item.id })
        //   }
        // } else {
        newarr.push({ label: item.name, value: item.id })
        // }
      })
      setSelectItem(newarr)
    }
  }, [tenants])

  return (
    <React.Fragment>
      <Modal
        className={styles.modalGlobal}
        title={isAddOpen.title ? isAddOpen.title : '立即创建'}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={539}
        okText='确定'
        cancelText='取消'
      >
        <Form layout='vertical' form={form}>
          {
            !isAddOpen?.mode
              ? <Form.Item>
                <div className="radio-button-group">
                  <div
                    className={`radio-button ${name === 'Agent' ? 'selected' : ''} agent-chat`}
                    onClick={() => handleSelect('agent-chat', 'Agent', 'agent')}
                  >
                    Agent
                  </div>
                  <div
                    className={`radio-button ${name === '插件' ? 'selected' : ''} chat`}
                    onClick={() => handleSelect('chat', '插件', 'chat')}
                  >
                    插件
                  </div>
                  <div
                    className={`radio-button ${name === '工作流' ? 'selected' : ''} workflow`}
                    onClick={() => handleSelect('workflow', '工作流', 'workflow')}
                  >
                    工作流
                  </div>
                </div>
              </Form.Item>
              : null
          }
          <Form.Item label='工作空间' name='workSpace' rules={[{ required: true, message: '请选择一个工作空间' }]}>
            <Select disabled={disabled} onChange={onSelectChange} options={selectItem} defaultValue={tenantId || null}></Select>
          </Form.Item>
          <Form.Item
            label={`${isAddOpen?.titleName || name}名称`} name='name'
            rules={[
              {
                required: true,
                validator: (_, value) => {
                  if (!value) {
                    return Promise.reject(`请输入${isAddOpen?.titleName || name}名称，仅支持中英文和数字`);
                  }
                  if (value.length > 0 && value[0] === ' ') {
                    return Promise.reject('输入内容的第一个字符不能是空格');
                  }
                  return Promise.resolve();
                }
              }
            ]}
          >
            <Input maxLength={20} placeholder={`给${isAddOpen?.titleName || name}起个名字,支持中英文、数字`} />
          </Form.Item>
          <Form.Item label={`${isAddOpen?.titleName || name}简介`} name='description' rules={[{ required: true, message: '请输入简介' }]}>
            <TextArea rows={6} placeholder={'请输入简介内容'}></TextArea>
          </Form.Item>
          {/* {(isAddOpen?.mode ? isAddOpen?.mode : choise) === 'chat' && <Form.Item label="接入选择" name="type" rules={[{ required: true, message: '请选择接入方式' }]}>
            <Radio.Group defaultValue="1" disabled>
              <Radio value="1"> 通过URL接入插件 </Radio>
              <Radio value="2"> 代码创建插件 </Radio>
            </Radio.Group>
          </Form.Item>} */}
          <Form.Item style={{ margin: '30px 0px 20px 0px' }}>
            <Space wrap size={16}>
              <div onClick={() => AvatarClick('1')} style={{ cursor: 'pointer' }}>
                <Badge count={avatarNumber === '1' ? <CheckCircleFilled style={{ color: '#1e90ff' }} /> : null}>
                  <Avatar shape="square" size="large" src={`/agent-platform-web/image/header_${avatarName}1.png`} />
                </Badge>
              </div>
              <div onClick={() => AvatarClick('2')} style={{ cursor: 'pointer' }}>
                <Badge count={avatarNumber === '2' ? <CheckCircleFilled style={{ color: '#1e90ff' }} /> : null}>
                  <Avatar shape="square" size="large" src={`/agent-platform-web/image/header_${avatarName}2.png`} />
                </Badge>
              </div>
              <div onClick={() => AvatarClick('3')} style={{ cursor: 'pointer' }}>
                <Badge count={avatarNumber === '3' ? <CheckCircleFilled style={{ color: '#1e90ff' }} /> : null}>
                  <Avatar shape="square" size="large" src={`/agent-platform-web/image/header_${avatarName}3.png`} />
                </Badge>
              </div>
              <div onClick={() => AvatarClick('4')} style={{ cursor: 'pointer' }}>
                <Badge count={avatarNumber === '4' ? <CheckCircleFilled style={{ color: '#1e90ff' }} /> : null}>
                  <Avatar shape="square" size="large" src={`/agent-platform-web/image/header_${avatarName}4.png`} />
                </Badge>
              </div>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </React.Fragment>
  )
}

export default CreateModal
